<template>
  <a-dropdown>
    <div class="user-detail">
      <a-avatar>
        <a-icon slot="icon"
                type="user"/>
      </a-avatar>
      <div class="user-name">{{ username }}</div>
    </div>
    <a-menu slot="overlay">
      <a-menu-item @click="goProfilePage">
        <a-icon type="user" />
        <span>个人资料</span>
      </a-menu-item>
      <a-menu-item class="logout" @click="logout">
        <a-icon type="poweroff"/>
        <span>登出</span>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>

import api from "@/common/api"
import {clearToken} from './../../common/store'

export default {
  name: "UserAvatar",
  data() {
    return {
      username: "",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData () {
      this.$get(api.getUserInfo).then((res) => {
        if (res) {
          let user = res.data;
          this.username = user.login;
          // console.log("getUserInfo:",res)
        }
      });
    },
    goProfilePage () {
      this.$router.push("/profile");
    },
    logout() {
      clearToken();
      this.$router.replace("/trainEntrance");
    },
  },


}

</script>

<style lang="less" scoped>
@import "../../styles/global.less";

.user-detail {
  display: flex;
  justify-content: center;
  align-items: center;

  .user-name {
    margin-left: 10px;
  }
}

.logout {
  color: @btn-danger-bg;
}
</style>
